<template>
  <el-sub-menu v-if="item.children && item.children.length" :index="item.index">
    <template #title>
      <el-icon><component :is="item.icon" /></el-icon>
      <span>{{ item.label }}</span>
    </template>
    <MenuItem v-for="child in item.children" :key="child.index" :item="child" />
  </el-sub-menu>
  <el-menu-item v-else :index="item.index">
    <el-icon><component :is="item.icon" /></el-icon>
    <span>{{ props.item.label }}</span>
  </el-menu-item>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps<{ item: any }>();
</script>
